<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	    <link rel="stylesheet" href="../../css/aui.css">
	    <link rel="stylesheet" href="../../css/login.css">
	    <script src="../../js/api.js"></script>
	    <script src="../../js/common.js"></script>
	    <script src="../../js/vue.min.js"></script>
	    <script src="../../js/vue-resource.min.js"></script>
	    <title>登录</title>
	</head>
	<body>
		
		<div id="box">
			
			<div class="WD-shenti">
				
				
				<div class="WD-nav">
					<div class="logo">
						<img src="../../img/logo.png" />
					</div>
					
					<div class="WD-info flex al">
						<div class="lmLogo useRdiv">
							<div class="unlogin"></div>
						</div>
						<div class="inp">
							<input type="text" class="useR" placeholder="请输入手机号或用户名" v-model="login.loginName" />
						</div>
					</div>
					
					<div class="WD-info flex al">
						<div class="lmLogo pasWdiv">
							<div class="unpassword"></div>
						</div>
						<div class="inp">
							<input type="password" class="pasW" placeholder="请输入密码" v-model="login.loginPwd" />
						</div>
					</div>
					<div class="WD-info flex al" v-show="isValidate">
						<div class="lmLogo">
							<img src="../../img/shield.png" />

						</div>
						
						<div class="need flex between">
							<div class="inp">
								<input type="text" placeholder="请输入图形验证码" v-model="login.verifyCode" />
							</div>
							
							<div class="yzm" onclick="clickCode(this)">
								<img :src="validateImgSrc" />
							</div>
						</div>
						
					</div>
				</div>
				<div class="loginbtn" style="margin-top: 1.9rem" @click="userLogin">登录</div>
				<div class="registerbtn" style="margin-top: 1.4rem"><a href="register.html">注册	</a></div>
				<div class="fPwd flex end">
					<a href="retrievePsd.html">忘记密码</a>
					<img src="../../img/forget.png" />
				</div>
			</div>
			
		</div>	
		<!--TODO:两次登录失败 输入图形验证码-->
	</body>
	<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$(".useR").focus(function(){
				$(".useRdiv div").removeClass('unlogin');
				$(".useRdiv div").addClass('login');
			})
			$(".pasW").focus(function(){
				$(".pasWdiv div").removeClass('unpassword');
				$(".pasWdiv div").addClass('password');
			})
		})

		new Vue({
			el:'#box',
			data:{
				login:{
					loginName:'',
					loginPwd:'',
                    verifyCode:''
				},
				isValidate:false
			},
			mounted:function(){
			   this. $nextTick(function () {

               })
			},
			methods:{
				userLogin:function(){

					var reg = /^\S*$/;
				
					if(true){

						this.$http.post(SURL+'app/users/login',this.login,{emulateJSON : true}).then(function(res){
							console.log(res)
							if(res.body.status=='1'){
								//用戶已經存在
                                alert(res.body.msg);

							}else if(res.body.status=='-1'){
								//用戶不存在
								alert(res.body.msg)
							}else{
							    //图像验证码输入错误 STATUS==3
								this.isValidate=true;

							}
						}).catch(function(res){
							console.log(res)
						})
					}
					
				},



			}


		})

		

		
	</script>
</html>
